<template>
    <div>
        <input placeholder="输入关键字搜索" v-model="search" @keyup.enter="searchs">
        <table class="my-table">
            <thead>
                <tr>
                    <th>就诊日期</th>
                    <th>医生姓名</th>
                    <th>诊断结果</th>
                    <th>处方信息</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in records" :key="item.doctor">
                    <td>{{ item.date }}</td>
                    <td>{{ item.doctor }}</td>
                    <td>{{ item.diagnosis }}</td>
                    <td>{{ item.prescription }}</td>
                    <td @click="Idata(item.doctor)">详情</td>
                </tr>
            </tbody>
            <SeacherDetail v-if="isShow" :datas="list" @PopUp="PopUp"></SeacherDetail>
        </table>
    </div>
</template>

<script>


import SeacherDetail from './SeacherDetail.vue';
export default {
    components: {
        SeacherDetail
    },
    data() {
        return {
            records: [
                {
                    date: '2022-01-01',
                    doctor: '张三',
                    diagnosis: '感冒',
                    prescription: '感冒药',
                },
                {
                    date: '2022-02-01',
                    doctor: '李四',
                    diagnosis: '头疼',
                    prescription: '止疼药',
                },
                {
                    date: '2022-03-01',
                    doctor: '王五',
                    diagnosis: '腰痛',
                    prescription: '止痛贴',
                }
            ],
            list: {},
            search: '',
            isShow: false
        }
    },
    methods: {
        // 搜索
        searchs() {
            // 判断是否为空
            if (this.search.trim() == '') {
                alert('请输入关键字')
                return
            }
            // 弹出弹框
            this.records = this.records.filter(item => item.doctor === this.search)

            // 清空输入框
            this.search = ''
        },
        // 传值
        Idata(name) {
            this.list = this.records.filter(item => item.doctor == name)[0]
            this.isShow = true
        },
        PopUp() {
            this.isShow = false
        }

    }

}
</script>

<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>